<template>
	<view>
		<page-meta>
			<navigation-bar :title="video.title"></navigation-bar>
		</page-meta>
		<swiper indicator-dots autoplay :interval="3000" :duration="1000" circular acceleration
		style="height: 500rpx;">
			<swiper-item v-for="(snap, idx) in snaps" :key="idx" @click="preview(idx)">
				<view class="swiper-item" style="height: 100%;">
					<image :src="video.url | poster(snap)" mode="aspectFit" webp></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="horizontal block" style="justify-content: space-between;">
			<view class="">ID: {{video.vid || 10000}}</view>
			<view class="">积分: {{video.coins || '免费'}}</view>
			<view class="">播放量: {{video.plays || 0}}</view>
			<view class="">{{video.duration | formatTime}}</view>
		</view>
		<view class="horizontal">
			<button type="default">下载</button>
			<button type="default">分享</button>
			<button type="default">预览</button>
			<button type="default">举报</button>
			<button type="default">收藏</button>
		</view>
		<view class="block">
			<view>视频内容简介</view>
			<view style="font-size: small;">{{video.desc || '暂无简介'}}</view>
		</view>
		<view class="">相关推荐</view>
		<view class="">
			
		</view>
		<button type="primary" class="bottom" @click="playVideo">播放该视频</button>
	</view>
</template>

<script>
	import {poster} from "../../main.js"
	
	export default {
		async onLoad(opts) {
			console.log(opts)
			Object.assign(this.video, opts)
			await this.getVideo(this.video._id)
			this.snaps = this.getSnaps(9)
		},
		
		filters:{
			formatTime(duration){
				duration = parseInt(duration)
				const min = parseInt(duration / 60)
				const sec = duration % 60
				const hour = parseInt(duration / 3600)
				if(min==0){
					return `${sec}秒`
				}else if(hour==0){
					return `${min}分${sec}秒`
				}else{
					return `${hour}时${min}分`
				}
			}
		},
		
		data() {
			return {
				snaps:[], 			// 视频截帧
				video:{
					_id:'',
					vid:'',
					url:'',
					poster:'',
					duration:'',
					width:'',
					height:'',
					title:'',
					desc:'',
					coins:0,
					plays:0,
				}
			}
		},
		methods: {
			async playVideo(){
				const can = true
				if(this.video.coins>0){
					const [err, res] = await uni.showModal({
						title: 'P币',
						content: `播放该视频需要消耗${this.video.coins}个P币，是否继续？`,
						cancelText: '取消',
						confirmText: '播放',
					});
					can = res.confirm
				}
				uni.navigateTo({
					url: `../play-video/play-video?video=${this.video._id}&poster=${this.video.poster}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			preview(idx){
				uni.previewImage({
					loop:true,
					urls:this.snaps.map(snap=>poster(this.video.url, snap)),
					current:idx,
				})
			},
			
			// 获取截帧
			getSnaps(count=9){
				const snaps = []
				for (var i = 0; i < 9; i++) {
					snaps.push(Math.random()*this.video.duration)
				}
				return snaps
			},
			
			async getVideo(_id){
				const db = uniCloud.database()
				const videos = db.collection('video')
				const {result} = await videos.doc(_id).get()
				Object.assign(this.video, result.data[0])
				console.log(this.video)
			},
		}
	}
</script>

<style>
	.bottom{
		position: fixed;
		bottom: 0;
		width: 750rpx;
	}
	
	swiper{
		height: 500rpx;
	}
	
	image{
		width: 100%;
		height: 100%;
	}
	
	.block{
		border-top: solid 1px gray;
		border-bottom: solid 1px gray;
		background: #fefefe;
	}
</style>
